import React, { useState, useEffect } from 'react'
import { Routes, Route, NavLink,Outlet } from 'react-router-dom'

function Add() {
    // 空数组,代表了mount 和unmount,监控的真个组件
    useEffect(() => {
        console.log('init/update执行')
        return () => {
            // 如果什么数据都不绑定那么就是卸载的操作
            console.log('默认卸载的操作')
        }
    }, [])
    return <h1> add路由</h1>
}
function List() {
    return <h1> List路由</h1>
}
function Myeffect() {

    return (
        <div>
            <NavLink to='/add'   >add</NavLink>  &nbsp;&nbsp;
            <NavLink to='/list'  >list</NavLink>  &nbsp;&nbsp;
            <Routes>
                <Route path='/add' element={<Add></Add>} ></Route>
                <Route path='/list' element={<List></List>} > </Route>
            </Routes>
        </div>
    )
}

export default Myeffect
